<template>
    <div class="elements-list">
        <h3 style="margin: 0 0 1rem 0; color: var(--color-heading);">当前元素</h3>

        <div v-if="rows.length === 0" style="color: var(--color-text-light-2); font-style: italic;">
            暂无元素，请添加一些机柜列
        </div>

        <!-- Rows -->
        <div v-if="rows.length > 0" style="margin-bottom: 1rem;">
            <h4 style="margin: 0 0 0.5rem 0; color: var(--color-primary);">机柜列 ({{ rows.length }})</h4>
            <div v-for="row in rows" :key="row.id"
                style="background: var(--color-background); border-radius: var(--border-radius); margin-bottom: 0.5rem; padding: 0.75rem;">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;">
                    <div>
                        <div style="font-weight: bold; color: var(--color-heading);">{{ row.name }}</div>
                        <div style="font-size: var(--font-size-xs); color: var(--color-text-light-2);">
                            位置: ({{ row.position.x }}, {{ row.position.y }}, {{ row.position.z }})mm |
                            机柜: {{ row.cabinetCount }} |
                            长度: {{ (row.totalLength).toFixed(0) }}mm
                        </div>
                    </div>
                    <div style="display: flex; gap: 0.25rem;">
                        <button @click="$emit('add-cabinet-to-row', row.id)"
                            style="padding: 0.25rem 0.5rem; background: var(--color-success); color: white; border: none; border-radius: 3px; cursor: pointer; font-size: var(--font-size-xs);">
                            +机柜
                        </button>
                        <button @click="$emit('remove-row', row.id)"
                            style="padding: 0.25rem 0.5rem; background: var(--color-danger); color: white; border: none; border-radius: 3px; cursor: pointer; font-size: var(--font-size-xs);">
                            删除
                        </button>
                    </div>
                </div>

                <!-- Cabinets in this row -->
                <div v-if="row.cabinets.length > 0"
                    style="margin-left: 1rem; border-left: 2px solid var(--color-border); padding-left: 0.5rem;">
                    <div v-for="cabinet in row.cabinets" :key="cabinet.id" :style="{
                        display: 'flex',
                        justifyContent: 'space-between',
                        alignItems: 'center',
                        padding: '0.25rem 0',
                        fontSize: 'var(--font-size-sm)',
                        backgroundColor: selectedCabinetId === cabinet.id ? 'var(--color-primary)' : 'transparent',
                        color: selectedCabinetId === cabinet.id ? 'white' : 'inherit',
                        borderRadius: '4px',
                        paddingLeft: '0.5rem',
                        cursor: 'pointer'
                    }" @click="$emit('select-cabinet', cabinet.id)">
                        <div>
                            <span style="font-weight: 500;">{{ cabinet.name }}</span>
                            <span style="margin-left: 0.5rem; font-size: 0.8em; opacity: 0.8;">
                                {{ CabinetTypeConfig[cabinet.type].icon }} {{
                                    CabinetTypeConfig[cabinet.type].name }}
                            </span>
                            <span style="margin-left: 0.5rem; font-size: 0.8em; opacity: 0.8;">
                                位置: {{ cabinet.position }}
                            </span>
                            <span v-if="cabinet.devices.length > 0"
                                style="color: var(--color-success); margin-left: 0.5rem;">
                                ({{ cabinet.devices.length }} 设备)
                            </span>
                        </div>
                        <div style="display: flex; gap: 0.25rem;">
                            <button @click.stop="$emit('remove-cabinet', row.id, cabinet.id)"
                                style="padding: 0.125rem 0.25rem; background: var(--color-danger); color: white; border: none; border-radius: 2px; cursor: pointer; font-size: 0.7rem;">
                                删除
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import type { Row } from '@/stores/datacenter'
import { CabinetTypeConfig } from '@/stores/datacenter'

interface Props {
    rows: Row[]
    selectedCabinetId: string | null
}

defineProps<Props>()

defineEmits<{
    'add-cabinet-to-row': [rowId: string]
    'remove-row': [rowId: string]
    'select-cabinet': [cabinetId: string]
    'remove-cabinet': [rowId: string, cabinetId: string]
}>()
</script>